<template>
  <div class="container">
    <ul id="scene">
      <li class="layer" data-depth="0.4">
        <img src="@/assets/TK/planet1.png" alt="">
      </li>
      <li class="layer" data-depth="0.3">
        <img src="@/assets/TK/planet2.png" alt="">
      </li>
      <li class="layer" data-depth="0.1">
        <img src="@/assets/TK/planet3.png" alt="">
      </li>
      <li class="layer" data-depth="0.7">
        <img src="@/assets/TK/planet4.png" alt="">
      </li>
      <li class="layer" data-depth="0.5">
        <img src="@/assets/TK/earth.png" alt="">
      </li>
      <li class="layer" data-depth="0.3">
        <img src="@/assets/TK/man.png" alt="">
      </li>
      <li class="layer" data-depth="0">
        <img src="@/assets/TK/text.png" alt="">
      </li>
      <li class="layer" data-depth="0.1">
        <img src="@/assets/TK/rocket.png" alt="">
      </li>
      <li class="layer move" data-depth="0.1">
        <img src="@/assets/TK/light-orange.png" alt="">
      </li>
    </ul>
  </div>
</template>

<script>
export default {}
</script>
<style scoped>
.container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url(~@/assets/TK/background.jpg) no-repeat;
  overflow: hidden;
  background-attachment: fixed;
}
.container .move {
  margin-left: 1450px;
  margin-top: -180px;
}
</style>
